<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据代理</title>
</head>

<body>
    <script>
        //模拟一个vue实例，创建_data
        const vm = {
            _data: {
                name: "lingHua",
                age: 18,
            }
        }
        //遍历_data,拿到属性名
        for (let key of Object.keys(vm._data)) {
            //给vm添加存取器属性，key为属性名，值为_data里数据对应的值
            Object.defineProperty(vm, key, {
                get: function getProxy() {
                    return vm._data[key]
                },
            //当修改vm上的值时候，将_data里的数据也修改为新的数据
                set: function setProxy(newVal) {
                    vm._data[key] = newVal
                }
            })
        }

    </script>
</body>

</html>